<template>
  <div class="selectTop">
    <div class="header">
      <h1>排行</h1>
      <!--<div class="new_date">3日<span class="icon el-icon-arrow-down"></span></div>-->
      <el-select  v-model="value2" placeholder="请选择" class="selectData">
        <el-option
          v-for="item in selectData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
          >
        </el-option>
      </el-select>
    </div>

    <div class="top">
      <div class="more">查看更多<span class="icon el-icon-arrow-right"></span></div>

      <div v-for="(item,index) in hotDate" class="item">
        <i class="no">{{index + 1}}</i>

        <router-link class="title"  :to="{path: '/movie/detail/'+item._id}">
          <span v-if="index != 0" class="title">{{item.title}}</span>
        </router-link>

        <div v-if="index === 0" class="top_one">
          <img :src="item.thumb" width="88" height="58">

          <div class="info">
            <router-link class="title"  :to="{path: '/movie/detail/'+item._id}">
            <h1 class="title">{{item.title}}</h1>
            </router-link>
            <span class="score">综合评分: {{item.see}}</span>
          </div>
        </div>

      </div>

      <!--<div class="item">-->
      <!--<i class="no">1</i>-->
      <!--<div class="top_one">-->
      <!--</div>-->
      <!--<span class="title">sdhsadhuisadsaoduosaudousa爱的撒旦撒旦撒旦o</span>-->
      <!--</div>-->



    </div>
  </div>
</template>

<script>
  export default {
    props: {
      hotDate: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {
        selectData: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value2: ''
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .selectTop{

    .header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 25px;
      height: 25px;



      h1{
        margin: 0;
        font-size: 18px;
        color: #222;
      }
      .new_date{
        border: 1px solid rgb(204, 208, 215);
        border-radius: 4px;
        margin-right: 2px;
        padding: 0 7px;
        font-size: 12px;
        .icon{
          margin-left: 5px;
        }
      }
    }
    .top{
      position: relative;
      padding-top: 20px;
      font-size: 0;
      height: 340px;
      .item{
        position: relative;
        margin-bottom: 18px;
        padding-left: 40px;
        .no{
          position: absolute;
          left: 0;
          top:0;
          padding: 0 10px;
          font-size: 12px;
          font-weight: bold;
          line-height: 17px;
          color: #fff;
          background: #f25d8e;
        }
        .title{
          display: inline-block;
          white-space:nowrap;
          overflow:hidden;
          cursor: pointer;
          line-height: 17px;
          width: 215px;
          font-size: 12px;
          color: #222;
          &:hover{
            color: #00a1d6;
          }
        }
        .top_one{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .info{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 125px;
            .title{
              display: block;
              word-break: normal;
              white-space: pre-wrap;
              word-wrap: break-word;
              width: auto;
              line-height: 18px;
              max-height: 36px;
            }
            .score{
              font-size: 12px;
              color: #99a2aa;
            }
          }
        }
      }
      .more{
        position: absolute;
        bottom: 0;
        left: 0;
        cursor: pointer;
        border: 1px solid #e0e6ed;
        border-radius: 4px;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        width: 99%;
        height: 24px;
        background: #e5e9ef;
        color: #222;
        transition: all .4s;
        .icon{
          margin-left: 5px;
          font-size: 12px;
        }
        &:hover{
          background: #ccd0d7
        }
      }
    }
  }
</style>
